<template>
  <div>
    <!-- -->
    <search @getValue="getSonValue"></search>
    <div class="main u-p-tb-50"  >
      <div class="search">
        <span >政策分类查询：</span>
        <el-select-v2 v-model="value" :options="options" placeholder="Please select" size="large"
          style="width: 130px" />
        <el-select-v2 class="u-m-l-20" v-model="value" :options="options" placeholder="Please select" size="large"
          style="width: 130px" />
        <el-button class="u-m-l-20" size="large" type="primary" :icon="Search"></el-button>
      </div>

      <div class="content u-m-tb-50">
        <div class="content-title">
          <p class="flex-2">文件标题</p>
          <p class="flex-1">发号文字</p>
          <p class="flex-1">发文机关</p>
          <p class="flex-1">主题分类</p>
          <p class="flex-1">发布日期</p>
        </div>
        <div class="contentitem pointer " v-for="i in 4">
          <div class="u-m-tb-20 contentbox">
            <p class="flex-2">河南省人人持证技能河南，建设工作领带小组办公室关于公布第一题种植和暂停部分培训机构名单的通知
            </p>
            <p class="flex-1">预计零版[2023]32号</p>
            <p class="flex-1">河南省人力资源和社会保证厅</p>
            <p class="flex-1">职业建设</p>
            <p class="flex-1">2023-5-23</p>
          </div>
          <el-divider border-style="dashed" />
        </div>
      </div>
      <div class="pagniation">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import search from '../acl/search.vue';
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
const value = ref('')
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
const getSonValue = (e) => {
  console.log(e);//子组件传入的值
}
</script>
<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center
}

.main {
  width: 1180px;
  margin: 30px auto;
  position: relative;

  .search {
    @include flex();
    font-size: 14px;
    span{
      flex-shrink: 0
    }
  }
  .content {
    width: 100%;
    .content-title {
      font-size: 14px;
      width: 100%;
      @include flex();
      justify-content: space-between;

      p {
        background-color: rgb(236, 236, 236);
        text-align: center;
        margin-right: 20px;
        padding: 10px;
      }
    }

    .contentbox {
      width: 100%;
      @include flex();
      justify-content: space-between;

      p {
        font-size: 12px;
        ;
        box-sizing: border-box;
        padding: 0 10px;
        margin-right: 20px;
        text-align: center;
      }
    }

  }

}
</style>